<template>
	<li>
		<div class="transform-tile">
			<div class="icon" @click="OnLiExpand">
				<CaretBottom v-show="isExpandForLiContent" />
				<CaretRight v-show="!isExpandForLiContent"/>
			</div>
			<div class="txt">图标设置</div>
			<div class="tool">
				<ul>
					<li @click="OnFixScale">
						<div style="width: 15px;height: 15px;">
							<Unlock v-show="!isFixScale"/>
							<Lock v-show="isFixScale"/>
						</div>
					</li>
					<li>
						<div style="height: 15px;margin-top: -8px;">
							  <el-switch
							    v-model="switchModel"
							    inline-prompt
							    active-text="选中"
							    inactive-text="默认"
								:disabled="isDisabled"
								@change="onSwitchChange"
							  />
						</div>
					</li>
					<li>
						<div style="margin-top: -8px;">
							<el-checkbox v-model="imgRef.show" @change="OnChange" >显示</el-checkbox>
						</div>
						
					</li>
				</ul>
			</div>
		</div>
		<div class="transform-content" v-show="isExpandForLiContent">
			<div class="c-row" style="height: 80px;margin-bottom: 3px;">
				<div class="t" style="height: 80px;text-align: center;padding-top: 26px;">图标样式:</div>
				<div class="img">
					<img @click="handleChangeImg" width="60" height="60" src="/src/assets/icons/boat-focus.png" />
				</div>
			</div>
			
			<div class="c-row">
				<div class="t">图标高宽:</div>
				<div class="input">
					<el-input size="small" v-model="imgRef.size"  @change="OnChange" />
				</div>
			</div>
			
			<div class="c-row">
				<div class="t">图标颜色:</div>
				<div class="input" style="width: 242px; margin-right: 5px;" >
					<el-input size="small" style="width: 242px;" readonly v-model="imgRef.color" @change="OnChange" />
				</div>
				<div class="color" >
					<el-color-picker v-model="imgRef.color" @change="OnChange" show-alpha />
				</div>
			</div>
			
			<div class="c-row">
				<div class="t">背景颜色:</div>
				<div class="input" style="width: 242px; margin-right: 5px;" >
					<el-input size="small" style="width: 242px;" readonly v-model="imgRef.bg_color" @change="OnChange" />
				</div>
				<div class="color" >
					<el-color-picker v-model="imgRef.bg_color" @change="OnChange" show-alpha />
				</div>
			</div>
			<div class="c-row">
				<div class="t">图标偏移:</div>
				<div class="input" >
					<el-input size="small" v-model="imgRef.offset"  @change="OnChange" />
				</div>
			</div>
		</div>
	</li>
	<ImgLibrary ref="imgLibraryRef"></ImgLibrary>
</template>

<script setup lang="ts">
	
	import {
	  CaretRight,CaretBottom,Unlock,Lock
	} from '@element-plus/icons-vue'
	import { ref } from 'vue'
	import { updateActor } from "@/api/scene";
	
	import ImgLibrary from "@/components/ImgLibrary/index.vue";
	
	const actorid= ref('')
	const isExpandForLiContent = ref(true)
	const isFixScale = ref(false)
	const isDisabled = ref(false)
	const switchModel = ref(false)
	const imgLibraryRef = ref()
	
	
	
	const imgRef=ref({
		show:true,
		url:"",//默认图标地址
		size:"100,100",//默认图标大小
		offset:"0,0",//默认图标偏移
		color:"rgba(0,0,0,1)",
		bg_color:"rgba(0,0,0,1)",
	});
	
	const normalRef=ref({
		show:true,
		url:"",//默认图标地址
		size:"100,100",//默认图标大小
		offset:"0,0",//默认图标偏移
		color:"rgba(0,0,0,1)",
		bg_color:"rgba(0,0,0,1)",
	});
	
	const activateRef=ref({
		show:true,
		url:"",//默认图标地址
		size:"100,100",//默认图标大小
		offset:"0,0",//默认图标偏移
		color:"rgba(0,0,0,1)",
		bg_color:"rgba(0,0,0,1)",
	});
	
	const OnFixScale=()=>{
		isFixScale.value=!isFixScale.value
		isDisabled.value=isFixScale.value
		if(isFixScale.value){
			switchModel.value=false;
			activateRef.value.show=normalRef.value.show
			activateRef.value.url=normalRef.value.url
			activateRef.value.size=normalRef.value.size
			activateRef.value.offset=normalRef.value.offset
			activateRef.value.color=normalRef.value.color
			activateRef.value.bg_color=normalRef.value.bg_color
			onSwitchChange(switchModel.value);
		}
	}
	
	const OnLiExpand=()=>{
		isExpandForLiContent.value=!isExpandForLiContent.value
	}
	
	const onSwitchChange=(val)=>{
		if(!val){
			imgRef.value.show=normalRef.value.show
			imgRef.value.url=normalRef.value.url
			imgRef.value.size=normalRef.value.size
			imgRef.value.offset=normalRef.value.offset
			imgRef.value.color=normalRef.value.color
			imgRef.value.bg_color=normalRef.value.bg_color
		}else{
			imgRef.value.show=activateRef.value.show
			imgRef.value.url=activateRef.value.url
			imgRef.value.size=activateRef.value.size
			imgRef.value.offset=activateRef.value.offset
			imgRef.value.color=activateRef.value.color
			imgRef.value.bg_color=activateRef.value.bg_color
		}
		onChangeActor();
	}
	
	const OnChange=()=>{
		synch();
	}
	
	const handleChangeImg=()=>{
		console.log('handleChangeImg')
		imgLibraryRef.value.show();
	}
	
	const synch=()=>{
		if(!switchModel.value){
			normalRef.value.show=imgRef.value.show
			normalRef.value.url=imgRef.value.url
			normalRef.value.size=imgRef.value.size
			normalRef.value.offset=imgRef.value.offset
			normalRef.value.color=imgRef.value.color
			normalRef.value.bg_color=imgRef.value.bg_color
		}else{
			activateRef.value.show=imgRef.value.show
			activateRef.value.url=imgRef.value.url
			activateRef.value.size=imgRef.value.size
			activateRef.value.offset=imgRef.value.offset
			activateRef.value.color=imgRef.value.color
			activateRef.value.bg_color=imgRef.value.bg_color
		}
		
		onChangeActor();
	}
	
	const setForImg=(id:string,data:{})=>{
		actorid.value=id;
		if(data){
			normalRef.value=data.normal;
			activateRef.value=data.activate;
		}else{
			normalRef.value={
				show:true,
				url:"",//默认图标地址
				size:"100,100",//默认图标大小
				offset:"0,0",//默认图标偏移
				color:"rgba(0,0,0,1)",
				bg_color:"rgba(0,0,0,1)",
			}
			activateRef.value={
				show:true,
				url:"",//默认图标地址
				size:"100,100",//默认图标大小
				offset:"0,0",//默认图标偏移
				color:"rgba(0,0,0,1)",
				bg_color:"rgba(0,0,0,1)",
			}
		}
		//onSwitchChange(switchModel.value);
	}
	
	const onChangeActor=()=>{
		updateActor({
			id:actorid.value,
			normalForImg:JSON.stringify(normalRef.value),
			activateForImg:JSON.stringify(activateRef.value),
		})
		.then((res) => {
			if(res.code==200){
				ElMessage.success(res.message || '成功.');
			}else{
				ElMessage.error(res.message || '系统出错');
			}
		})
		.catch((e) => {
		})
		.finally(() => {
		});
	}
	
	
	defineExpose({
		setForImg
	});
	
</script>

<style  scoped>
	
	
	.transform-tile{
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		height: 1.875rem;
		height: 30px;
		border-width: 1px 0 0 0;
		border-style: solid;
		border-color: #4e505c;
		background-color: #37383c;
		line-height: 100%;
		width: 100%;
		padding-top: 6px;
		padding-left: 6px;
		width: 100%;
		font-size: 0.75rem;
		>.icon{
			width: 16px;
			height: 16px;
		}
		>.txt{
			flex: 1;
			margin-left: 0.375rem;
			padding-top: 3px;
		}
		>.tool{
			width: auto;
			>ul{
				>li{
					list-style: none;
					float: left;
					cursor: pointer;
					color: #ccc;
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					-webkit-box-pack: justify;
					-ms-flex-pack: justify;
					justify-content: space-between;
					-webkit-box-align: center;
					-ms-flex-align: center;
					align-items: center;
					padding-right: 0.3125rem;
				}
			}
		}
	}
	.transform-content{
		font-size: 0.75rem;
		flex: 1;
		height: 100%;
		width: 100%;
		margin-bottom:10px;
		>.c-row{
			height: 30px;
			padding-top: 5px;
			>.t{
				float: left;
				margin-left: 0.3125rem;
				margin-right: 0.3125rem;
				padding-top: 3px;
				color: #ccc;
				font-size: 0.75rem;
			}
			>.img{
				float: left;
				padding: 0.3125rem;
				border: 1px solid #4d505d;
				>img{
					width: 3.75rem;
					height: 3.75rem;
					cursor: pointer;
				}
			}
			>.input{
				float: left;
				height: 24px;
				text-align: center;
				margin-top: -2px;
				padding-top: 2px;
				width: 17.125rem;
			}
			>.color{
				float: left;
				width: 2rem;
				height: 2rem;
			}
		}
	}
	
	
/deep/ .el-color-picker__trigger {
    height: 26px;
    width: 26px;
	border: 1px solid #4d505d;
}	
	
/deep/ .el-select {
   width:  17.125rem;
}	
/deep/ .el-input-number--small {
	width:  17.125rem;
	line-height: 22px;
	height: 24.5px;
}

/deep/.el-select .el-input.is-focus .el-input__wrapper {
	box-shadow:none;
}

/deep/ .el-input-number.is-controls-right .el-input__wrapper {
	background: transparent;
	padding-left: 15px;
	padding-right: 42px;
	border-radius: 0px;
	color: #ccc;
}

/deep/ .el-input-number.is-controls-right .el-input-number__increase {
    border-radius: 0 ;
}
/deep/.el-input-number.is-controls-right .el-input-number__decrease {
    border-radius: 0;
}

/deep/ .el-input__inner {
    color: #ccc;
	outline-style: none ;
}

/deep/.el-input__wrapper {
    box-shadow: none;
	background-color: #272729;
	border: 1px solid #4d505d;
}

/deep/ .el-input-number__decrease, .el-input-number__increase {
	background:transparent;
	color: #ccc;
}

/deep/ .el-input-number__increase {
	background:transparent;
	color: #ccc;
}

/deep/.el-input__wrapper {
	border-radius: 0 ;
}

/deep/.el-input-number__increase {
	border-left:1px solid #4d505d; 
	border-bottom:1px solid#4d505d;
    border-radius: 0;
}

/deep/.el-input-number__decrease {
    border-radius: 0;
	border-top:1px solid #4d505d; 
	border-left:1px solid #4d505d; 
	border-bottom:1px solid#4d505d;
}

/deep/ .el-input-number.is-controls-right .el-input-number__decrease {
  border-left:1px solid #4d505d; 
}
/deep/ .el-input-number.is-controls-right .el-input-number__increase {
	border-bottom:1px solid#4d505d;
}

</style>